<template>
    <div>
        <span class="open-account-btn" @click="handleVisible(true)" v-if="btnVisible">
            <!-- 自定义选择商品按钮 -->
            <slot name="btn">
                <el-button type="primary" :disabled="disabled">开通账户</el-button>
            </slot>
        </span>
        <el-dialog
            class="open-account-dialog"
            align-center
            title="选择开通主体类型"
            v-model="visible"
            width="40%"
            @close="closeCallback()">
            <div class="open-account-dialog-body">
                <div class="open-account-dialog-main">
                    <div
                        class="open-account-dialog-box"
                        v-for="{ label, name, icon, value, disabled } in boxList"
                        :class="{
                            'open-account-dialog-box-clicked': value === activeValue,
                            'is-box-disabled': disabled
                        }"
                        :key="name"
                        @click="handleClicked(value)">
                        <img class="custom-img" :src="icon" />
                        <span class="custom-label">{{ label }}</span>
                    </div>
                </div>
                <div class="open-account-dialog-bottom">
                    <el-form>
                        <el-form-item label="开通产品类型：">
                            <el-checkbox-group class="custom-checkbox-group" v-model="ispCode">
                                <el-checkbox label="BHT" disabled>宝户通</el-checkbox>
                                <el-checkbox label="HELIPAY" disabled>合利宝（慧收钱）</el-checkbox>
                                <!-- <el-checkbox label="HUISHOUQIAN" readonly></el-checkbox> -->
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="开通产品能力：">
                            <el-checkbox-group class="custom-checkbox-group" v-model="capacityCode">
                                <el-tooltip placement="top" content="账户为产品基础能力，不支持取消">
                                    <el-checkbox label="ACCOUNT" disabled>账户</el-checkbox>
                                </el-tooltip>
                                <el-checkbox label="ACQUIRING">收单</el-checkbox>
                                <!-- <el-checkbox label="HUISHOUQIAN" readonly></el-checkbox> -->
                            </el-checkbox-group>
                            <div class="capacity-tips">
                                开启收单能力后，需要法人/联系人微信和支付宝的认证和授权，完成认证授权后所有产品类型均支持微信、支付宝收单。
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <template #footer>
                <div class="custom-footer">
                    <el-button @click="handleVisible(false)">取消</el-button>
                    <el-button type="primary" @click="handleConfirm(false)">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, unref } from 'vue';
import { cloneDeep, isEmpty } from '@/commons/utils';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

/* ---------------------------------- 父级通信 start ---------------------------------- */
const emit = defineEmits(['handle-confirm']);
const props = defineProps({
    // 是否显示控制按钮
    btnVisible: {
        type: Boolean,
        default: true
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false
    }
});
/* ---------------------------------- 父级通信 end ---------------------------------- */

/* ---------------------------------- 弹窗数据 start ---------------------------------- */
// 商户类型
const boxList = reactive([
    {
        name: 'enterprise',
        value: '1',
        label: '企业商户',
        disabled: false,
        icon: 'https://img.static-keyid.cn/toolspace/scrm/2023/10/1697683499131nmxozoirkl9dy6xx.png'
    },
    {
        name: 'individual',
        value: '2',
        label: '个体工商户',
        disabled: false,
        icon: 'https://img.static-keyid.cn/toolspace/scrm/2023/10/1697683499136bd3xr7jlzu8sfc5w.png'
    },
    {
        name: 'person',
        value: '3',
        label: '个人商户',
        disabled: true,
        icon: 'https://img.static-keyid.cn/toolspace/scrm/2023/10/1697683499124mdnk9jicl69dugzf.png'
    }
]);
/* ---------------------------------- 弹窗数据 end ---------------------------------- */

/* ---------------------------------- 控制弹窗 start ---------------------------------- */
let visible = ref(false); // 弹窗展示隐藏
// 展示隐藏
const handleVisible = (isVisible = false) => {
    if (props.disabled) {
        return;
    }
    visible.value = isVisible;
    activeValue.value = '';
    capacityCode.value = ['ACCOUNT', 'ACQUIRING'];
};
// 关闭后回调
const closeCallback = visible => {};

// 商户值
const ispCode = ref(['BHT', 'HELIPAY', 'HUISHOUQIAN']);
// 产品能力值
const capacityCode = ref(['ACCOUNT', 'ACQUIRING']);
// 选择商户
let activeValue = ref('');
const handleClicked = value => {
    // if (value !== '1') {
    //     return;
    // }
    if (activeValue.value == value) {
        activeValue.value = '';
        return;
    }
    activeValue.value = value;
};

// 确认按钮
const handleConfirm = () => {
    if (!activeValue.value) {
        ElMessage.error('请选择开通主体类型');
        return;
    }
    // 传参产品类型和产品能力
    router.push({
        path: '/pay/account/create',
        query: {
            isp_code: ispCode.value,
            capacity_code: capacityCode.value,
            corp_main_type: activeValue.value
        }
    });
    handleVisible(false);
};

/* ---------------------------------- 控制弹窗 end ---------------------------------- */
</script>

<style lang="scss">
.open-account {
    &-dialog {
        max-width: 600px;
        min-width: 600px;

        .el-button {
            font-family: initial;
            font-weight: 400;
        }

        &-main {
            box-sizing: border-box;
            padding: 16px 30px 32px;
            display: flex;
            justify-content: space-between;
        }
        .custom-checkbox-group {
            .el-checkbox[readonly] {
                cursor: not-allowed;
                .el-checkbox__input {
                    opacity: 0.5;
                    cursor: not-allowed;
                }
            }
            .el-checkbox__input.is-disabled + .el-checkbox__label {
                opacity: 0.5;
                color: var(--el-checkbox-checked-text-color) !important;
            }
            .el-checkbox__input.is-disabled .el-checkbox__inner {
                opacity: 0.5;
                background-color: var(--el-checkbox-checked-bg-color);
                border-color: var(--el-checkbox-checked-input-border-color);
                &::after {
                    border-color: var(--el-checkbox-checked-icon-color);
                }
            }
        }
        &-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            transition: all 0.3s;
            width: 148px;
            height: 164px;
            box-sizing: border-box;
            cursor: pointer;
            .custom-img {
                height: 56px;
            }
            .custom-label {
                font-size: 18px;
                color: #33302d;
                margin-top: 17px;
                transition: color 0.3s;
            }
            /* &:hover {
                background: #fff5f1;
                border: 1px solid #ff6b00;
                .custom-label {
                    color: #ff6b00;
                }
            } */
            &-clicked {
                background: #fff5f1;
                border: 1px solid #ff6b00;
                .custom-label {
                    color: #ff6b00;
                }
            }
        }
        .is-box-disabled {
            position: relative;
            &::after {
                cursor: not-allowed;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                font-weight: 500;
                color: #ffffff;
                position: absolute;
                content: '敬请期待';
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.4);
                border-radius: 4px;
            }
            .custom-label {
                color: #999999;
            }
        }
        &-bottom {
            font-size: 14px;
            color: #585858;
            padding: 0 29px;
        }
        .capacity-tips {
            font-size: 12px;
            color: #999;
            line-height: 1.6;
        }
    }
    &-btn {
        .el-button {
            width: 96px;
            font-size: 14px;
            font-family: initial;
            font-weight: 400;
            color: #ffffff;
        }
    }
    .custom-footer {
        border-bottom: 1px solid #eaeaea;
        padding: 12px 21px 0;
        .el-button {
            padding: 8px 17px;
        }
    }
}
</style>
<style lang="scss" scoped></style>
